import React, { Component, createContext, useContext } from 'react'
// 1.创建 跨组件的 上下文对象，大驼峰
const NameContext = createContext()
const ColorContext = createContext()
// displayName可以在开发者工具中 显示具体的名字
NameContext.displayName = 'NameContext'
ColorContext.displayName = 'ColorContext'
const Third = () => {
  
  const name = useContext(NameContext)
  const color = useContext(ColorContext)
  
  return (
    <div>
      3355555333 -  { name } - { color }
    </div>
  )
}

const Second = (props) => {
  return (
    <div>
      222222
      <Third/>
    </div>
  )
}
class First extends Component {
  render () {
    return (
      <div>
        1111
        <Second/>
      </div>
    )
  }
}
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 2.顶级组件中通过 上下文对象 下的 Provider 组件 配合 value 属性传值 */}
        <NameContext.Provider value = "传家宝123">
          <ColorContext.Provider value="red">
            <First />
          </ColorContext.Provider>
        </NameContext.Provider>
      </div>
    )
  }
}
